<template>
  <div v-if="visible" :class="prefixCls" @click="scrollToTop">
    <slot>
      <button :class="`${prefixCls}-btn`">
        <a-icon name="fanhuidingbu"></a-icon>
      </button>
    </slot>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import aIcon from "../arco-icon/index.vue";
export default defineComponent({
  name: "BackTop",
  components: {
    aIcon,
  },
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    title: String,
    /**
     * @zh 显示回到顶部按钮的触发滚动高度
     * @en Display the trigger scroll height of the back to top button
     */
    visibleHeight: {
      type: Number as PropType<number>,
      default: 200,
    },
    /**
     * @zh 滚动事件的监听容器
     * @en Scroll event listener container
     */
    targetContainer: {
      type: [String, Object] as PropType<string | HTMLElement>,
    },
    /**
     * @zh 滚动动画的缓动方式，可选值参考 [BTween](https://github.com/PengJiyuan/b-tween)
     * @en Easing mode of scrolling animation, refer to [BTween](https://github.com/PengJiyuan/b-tween) for optional values
     */
    easing: {
      type: String,
      default: "quartOut",
    },
    /**
     * @zh 滚动动画的持续时间
     * @en Duration of scroll animation
     */
    duration: {
      type: Number,
      default: 200,
    },
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const prefixCls = "arco-back-top";

    const visible = computed(() => {
      return props.scrollTop >= props.visibleHeight;
    });

    // 返回上一级
    function back() {
      uni.navigateBack();
    }

    const scrollToTop = () => {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: props.duration,
      });
    };

    return {
      prefixCls,
      visible,
      back,
      scrollToTop,
    };
  },
});
</script>
